<template>
  <!-- <table border="1px">
    <tr>
      <td>医生名称</td>
      <td>所属科室</td>
      <td>所属医院</td>
      <td>医生简介</td>
      <td>医生专长</td>
      <td>询问</td>
    </tr>
    <tr>
      <td>{{ doctorobj.name }}</td>
      <td>{{ doctorobj.department_name }}</td>
      <td>{{ doctorobj.hospital_name }}</td>
      <td>{{ doctorobj.description }}</td>
      <td>{{ doctorobj.specialty }}</td>
      <td><el-button type="primary" @click="router.push({path: '/doctor_query', query: {name: doctorobj.name, department : doctorobj.department_name}})">
        询问
      </el-button></td>
    </tr>
  </table> -->
  <div class="contentbox">
    <div class="name">{{ doctorobj.name }}</div>
    <div class="department">{{ doctorobj.department_name }}</div>
    <div class="category">{{ doctorobj.category_display }}</div>
    <div class="hospital">{{ doctorobj.hospital_name }}</div>
    <div class="description">简介：{{ doctorobj.description }}</div>
    <div class="specialty">专长：{{ doctorobj.specialty }}</div>
    <img class="avatar" :src="doctorobj.doctor_avatar" alt="医生头像">
    <el-button class="button" type="primary" @click="router.push({path: '/doctor_query',
     query: {id: doctorobj.id, name: doctorobj.name, department : doctorobj.department_name, avatar: doctorobj.doctor_avatar}})">
      向{{ doctorobj.name }}医生询问
    </el-button>
    <el-button  type="primary" @click="router.push({path: '/order_create',
     query: {id: doctorobj.id}})">
      下订单
    </el-button>
  </div>
</template>

<style scoped>
  html, body{
    background-color: #f0f0f0;
  }
  .contentbox{
    position: relative;
    margin: 0 auto;
    width: 760px;
    height: 900px;
    background-color: white;
  }
  .name{
    position: absolute;
    top: 40px;
    left: 20px;
    font-size: 30px;
    font-weight: bold;
  }
  .department{
    position: absolute;
    top: 90px;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .category{
    position: absolute;
    top: 90px;
    left: 100px;
    font-size: 20px;
    font-weight: bold;
  }
  .hospital{
    position: absolute;
    top: 140px;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .description{
    position: absolute;
    top: 180px;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .specialty{
    position: absolute;
    top: 220px;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .avatar{
    position: absolute;
    top: 20px;
    right: 30px;
  }
  .button{
    width: 760px;
    height: 50px;
    position: fixed;
    bottom: 0;
    margin: auto 0;
    font-size: large;
    text-align: center;
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let id = route.query.id

  let doctorobj = ref({
  })

  const getdoctorobj=()=>{
    axios.get(`http://127.0.0.1:8000/doctor/doctorRetrieve/${id}/`)
    .then(res=>{
      console.log(res)
      doctorobj.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    getdoctorobj()
  })

</script>
